<template>
  <div class="container">

  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="register-form"
  >
    <h3 class="title">用户注册</h3>
    <el-form-item label="用户名" prop="userName">
      <el-input v-model="ruleForm.userName" type="text" autocomplete="off" >
        <template #prefix>
          <svg-icon icon='user'/>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="昵称" prop="nickName">
      <el-input v-model="ruleForm.nickName" type="text" autocomplete="off" >
        <template #prefix>
          <svg-icon icon='logininfor'/>
        </template>
      </el-input>

    </el-form-item>


    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" type="password" autocomplete="off" >
        <template #prefix>
          <svg-icon icon='password'/>
        </template>
      </el-input>
    </el-form-item>

<!--    <el-form-item label="再次输入密码" prop="checkPass">-->
<!--      <el-input-->
<!--          v-model="ruleForm.checkPass"-->
<!--          type="password"-->
<!--          autocomplete="off"-->
<!--      />-->

<!--    </el-form-item>-->
    <el-form-item label="邮箱" prop="email">
      <el-input
          v-model="ruleForm.email"
          type="text"
          autocomplete="off"
      >
        <template #prefix>
          <svg-icon icon='email'/>
        </template>
      </el-input>

    </el-form-item>

    <el-form-item label="手机号" prop="phonenumber">
      <el-input
          v-model="ruleForm.phonenumber"
          type="text"
          autocomplete="off"
      >
        <template #prefix>
          <svg-icon icon='phone'/>
        </template>
      </el-input>
    </el-form-item>
<!--    <el-form-item label="Age" prop="age">-->
<!--      <el-input v-model.number="ruleForm.age" />-->
<!--    </el-form-item>-->
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
      >提交</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">重写</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import {inject} from "vue-demi";

const request = require("@/utils/request.js")
const store:any = require("@/store/index.js")
const router:any = require("@/router/index.js")


const reload:any = inject("reload")
const   ruleFormRef = ref<FormInstance>()



const validatePass3 = async (rule: any, value: any, callback: any) => {

  if (value === '') {
    callback(new Error('请输入用户名'))
  } else {
    let result = await request.get("/user/register/name?userName="+ruleForm.userName);
    let data = result.data;
    if (data.code == 200) {
      callback()
    } else {
      callback(new Error(data.code+" "+data.msg))
    }

  }
  }
  const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {

    callback()
    }
  }
  const validatePass4 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入邮箱'))
  } else {

    callback()
    }
  }
  const validatePass5 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入手机号'))
  } else {

    callback()
    }
  }
  const validatePass6 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入昵称'))
  } else {

    callback()
    }
  }
const handleLogin = async () => {
  let result = await request.post("user/login",ruleForm);
  let data = result.data;
  if (data.code == "200") {
    const token = data.data.token;
    console.log("登录成功,token=" + token);
    store.default.commit("SET_TOKEN",token)
    reload();
  } else {
    console.log(data.code + " " + data.msg)
  }
}

const ruleForm = reactive({
  password: '',
  // checkPass: '',
  // age: '',
  email:'',
  phonenumber:'',
  userName:'',
  nickName:''
})

const rules = reactive({
  password: [{ validator: validatePass2, trigger: 'blur' }],
  userName: [{ validator: validatePass3, trigger: 'blur' }],
  email: [{ validator: validatePass4, trigger: 'blur' }],
  phonenumber: [{ validator: validatePass5, trigger: 'blur' }],
  nickName: [{ validator: validatePass6, trigger: 'blur' }],
})

const submitForm =  (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let result = await request.post("http://localhost/user/register", ruleForm)
      let data = result.data
      if(data.code == 200){
        console.log(data.code+" "+data.msg)
        await handleLogin();
        console.log(ruleForm)
        console.log('submit!')
      }else {
        return false
      }


    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style lang="scss" scoped>
a {
  color: white
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/preview.jpg");
  background-size: cover;
}

.title {
  margin: 5px auto 30px auto;
  text-align: center;
  font-size: larger;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 50%;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 40px;
    padding: 3%;


    input {
      display: inline-block;
      height: 40px;
    }
  }



}

.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.register-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}


.register-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>
